<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>流程管理</title>
    <style>
        table {
            border-collapse: collapse;
        }

        table td {
            border: 1px solid grey;
            padding: 5px;
            word-wrap: break-word;
            word-break: break-all;
        }

        table input {
            border: none;
        }

        input[readonly] {
            background-color: #cccccc;
        }

        a {
            padding: 3px;
            background-color: #428bca;
            border-radius: 3px;
            text-decoration: none;
            color: white;
        }

        a:hover {
            padding: 3px;
            background-color: #4F94CD;
        }
    </style>
    <script type="text/javascript" src="../statics/js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="../statics/js/layer/layer.js"></script>
    <script type="text/javascript">

        /**
         * 发起流程
         * @param key
         */
        function start(key) {
            if (key) {
                var html = '<select id="userSelect" style="height:30px;width:250px;margin:10px;"><option value="">-请选择-</option><#list users as u><option value="${u.id}">${u.userName}</option></#list></select>';
                layer.open({
                    type: 1,
                    title:'选择用户',
                    skin: 'layui-layer-lan',
                    content: html,
                    resize:false,
                    btn:'确定',
                    yes:function(index, layero){
                        var userId = $("#userSelect").val();
                        if (!userId || userId==""){
                            layer.alert("请选择用户");
                            return;
                        }
                        layer.close(index);
                        $.ajax({
                            url: '../leave/start.do',
                            data: {key: key,userId:userId},
                            dataType: 'json',
                            success: function (data, textStatus) {
                                layer.alert(data.message)
                                if (data.success) {
                                    location.reload();
                                }
                            }
                        });
                    }
                });
            } else {
                layer.alert("key为空");
            }
            /**/
        }
        /**
         * 进行审批
         * @param key
         */
        function handle(taskId) {
            if (taskId) {
                var html = '<div  style="height:30px;width:250px;margin:10px;">' +
                        '<input type="radio" id="action1" name="action" value="1" checked/>' +
                        '<label for="action1">同意</label>&nbsp;&nbsp;&nbsp;&nbsp;' +
                        '<input type="radio" id="action0" name="action" value="0"/>' +
                        '<label for="action0">驳回</label>' +
                        '</div>';
                layer.open({
                    type: 1,
                    title:'选择用户',
                    skin: 'layui-layer-lan',
                    content: html,
                    resize:false,
                    btn:'确定',
                    yes:function(index, layero){
                        var action = $("input[name=action]:radio:checked").val();
                        if (!action || action==""){
                            layer.alert("请选择意见");
                            return;
                        }
                        layer.close(index);
                        $.ajax({
                            url: 'handle.do',
                            data: {taskId: taskId,action:action},
                            dataType: 'json',
                            success: function (data, textStatus) {
                                layer.alert(data.message)
                                if (data.success) {
                                    location.reload();
                                }
                            }
                        });
                    }
                });
            } else {
                layer.alert("taskId为空");
            }
            /**/
        }

    </script>
</head>
<body>
<a href="javascript:void(0);" onclick="start('QingJiaShenQingProcess')">发走请假流程</a>
<h4>流程实例列表</h4>
<table>
    <thead>
    <tr>
        <td>ProcessDefinitionId</td>
        <td>ProcessDefinitionName</td>
        <td>ProcessDefinitionKey</td>
        <td>ProcessDefinitionVersion</td>
        <td>ProcessInstanceId</td>
        <td>DeploymentId</td>
        <td>BusinessKey</td>
        <td>Name</td>
        <td>Description</td>
        <td>状态</td>
        <td width="145px">操作</td>
    </tr>
    </thead>
    <tbody>
    <#list processInstanceList as p>
    <tr>
        <td>${p.processDefinitionId!}</td>
        <td>${p.processDefinitionName!}</td>
        <td>${p.processDefinitionKey!}</td>
        <td>${p.processDefinitionVersion!}</td>
        <td>${p.processInstanceId!}</td>
        <td>${p.deploymentId!}</td>
        <td>${p.businessKey!}</td>
        <td>${p.name!}</td>
        <td>${p.description!}</td>
        <td>${p.suspended?string("挂起","激活")}</td>
        <td>
            <a target="_blank" href="graph.htm?processDefinitionId=${p.processDefinitionId!}&executionId=${p.id}" ">流程图</a>
            <a href="javascript:void(0);" onclick="update('${p.id}')">修改</a>
            <a href="javascript:void(0);" onclick="del('${p.deploymentId}')">删除</a>
        </td>
    </tr>
    </#list>
    </tbody>
</table>
<h4>流程待办任务列表</h4>
<table>
    <thead>
    <tr>
        <td>name</td>
        <td>description</td>
        <td>owner</td>
        <td>assignee</td>
        <td>DelegationState</td>
        <td>dueDate</td>
        <td>状态</td>
        <td width="145px">操作</td>
    </tr>
    </thead>
    <tbody>
    <#list taskList as t>
    <tr>
        <td>${t.name!}</td>
        <td>${t.description!}</td>
        <td>${t.owner!}</td>
        <td>${t.assignee!}</td>
        <td>${t.delegationState!}</td>
        <td>${t.dueDate!}</td>
        <td>${t.suspended?string("挂起","激活")}</td>
        <td>
            <a href="javascript:void(0);" onclick="handle('${t.id}')">审批</a>
            <a href="historyTask.htm?processInstanceId=${t.processInstanceId}">查看审批历史</a>
        </td>
    </tr>
    </#list>
    </tbody>
</table>
</body>
</html>